@import url('font-awesome.css');
*,
*:after,
*:before{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td { margin: 0; padding: 0; }
img { border: 0;display: block; }
li { list-style: none; }
h1, h2, h3, h4, h5, h6 { font-size: 100%;}
a{ text-decoration:none; color:#666;}
body { color:#666; font:14px/1.5 Hiragino Sans GB,Arial,Helvetica,Microsoft YaHei,sans-serif; min-width:320px; -webkit-tap-highlight-color:rgba(0,0,0,0);}
.fl{float: left;}
.fr{float: right;}
.cb{clear: both;}
.clearfix:after { content:"."; display:block; height:0; visibility:hidden; clear:both; }  //伪类清除浮动
.clearfix { zoom:1; } 

input,button,select,textarea{outline:none;border: none;}
/*login*/
body{background: url(../images/login_bg.jpg);background-size: 100% auto;background-position: 0 5%;}
.login_container{position: absolute;top: 50%;margin-top: -150px;left: 50%;margin-left: -150px;}
.login_main{width: 300px;margin: 0 auto;}
.login_form p{width: 70%;float: left;border: 1px solid #fff;border-right: none;border-radius: 0 0 0 5px;}
.login_form button{width: 30%;float: left;height: 102px;border-radius:0 0 5px 0;cursor: pointer;position: relative;
	background: url(../images/noise.png), -moz-radial-gradient(center, ellipse cover, #ee4c8d 0%, #b53467 100%);
	background: url(../images/noise.png), -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#ee4c8d), color-stop(100%,#b53467));
	background: url(../images/noise.png), -webkit-radial-gradient(center, ellipse cover, #ee4c8d 0%,#b53467 100%);
	background: url(../images/noise.png), -o-radial-gradient(center, ellipse cover, #ee4c8d 0%,#b53467 100%);
	background: url(../images/noise.png), -ms-radial-gradient(center, ellipse cover, #ee4c8d 0%,#b53467 100%);
	background: url(../images/noise.png), radial-gradient(ellipse at center, #ee4c8d 0%,#b53467 100%);
}
.login_form button.registerbtn{
	height: 153px;
	background: url(../images/noise.png), -moz-radial-gradient(center, ellipse cover, #ee4c8d 0%, #b53467 100%);
	background: url(../images/noise.png), -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#ee4c8d), color-stop(100%,#b53467));
	background: url(../images/noise.png), -webkit-radial-gradient(center, ellipse cover, #ee4c8d 0%,#b53467 100%);
	background: url(../images/noise.png), -o-radial-gradient(center, ellipse cover, #ee4c8d 0%,#b53467 100%);
	background: url(../images/noise.png), -ms-radial-gradient(center, ellipse cover, #ee4c8d 0%,#b53467 100%);
	background: url(../images/noise.png), radial-gradient(ellipse at center, #B9D9CD 0%,#95B6B0 100%);
}
.login_form p input{width: 100%;height: 50px;padding: 0 10px;background: rgba(255,255,255,0.2);box-shadow: inset 0 0 10px rgba(255,255,255,0.5);text-indent: 10px;color: #EE4C8D;text-shadow: 0 1px 2px rgba(0,0,0,0.3);font-size:20px;font-family: "Montserrat",sans-serif;}
.login_form p input[type=text]{border-bottom: 1px solid #fff;}
.login_form p input[type=password]{border-radius: 0 0 0 5px;}
.login_form button span{    display: block;font-size: 20px;font-family: 'Montserrat',arial,sans-serif;color: #8d1645;text-shadow: 0 1px 0 rgba(255,255,255,0.4);-webkit-backface-visibility: hidden;
	-webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg);
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -ms-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    transition: all 0.2s linear;
}
.login_form button span.registerspan{color: #EEDFCA;}
    
.login_form button i{width: 100%;height: 100%;position: absolute;top: 0;left: -20px;font-size: 64px;line-height: 109px;color: #8D1645;opacity: 0;text-shadow: 0 1px 0 rgba(255,255,255,0.4);
    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    -ms-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
}
.login_form button i.registeri{color: #9AB3A6;line-height: 153px;}
/*hover on input*/
.login_form p input:hover{background: rgba(255,255,255,0.5);}

/* Focus and hover on button */
.login_form button:focus {
    outline: none;
}

.login_form button:hover span,
.login_form button:focus span {
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
    -webkit-transform: rotate(-90deg) translateY(-20px);
    -moz-transform: rotate(-90deg) translateY(-20px);
    -ms-transform: rotate(-90deg) translateY(-20px);
    -o-transform: rotate(-90deg) translateY(-20px);
    transform: rotate(-90deg) translateY(-20px);
}

.login_form button:hover i,
.login_form button:focus i {
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter: alpha(opacity=50);
    opacity: 0.5;
    left: 0;
    -webkit-transition-delay: 0.2s;
    -moz-transition-delay: 0.2s;
    -o-transition-delay: 0.2s;
    -ms-transition-delay: 0.2s;
    transition-delay: 0.2s;
}

/* Click on button */

.login_form button:active span,
.login_form button:active i {
    -webkit-transition: none;
    -moz-transition: none;
    -ms-transition: none;
    -o-transition: none;
    transition: none; 
}

.login_form button:active span {
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
}

.login_form button:active i {
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter: alpha(opacity=50);
    opacity: 0.5;
    left: 0;
    color: #fff;
}
/*nav*/
nav{border-top: 1px solid #fff;border-right: 1px solid #fff; border-left:1px solid #fff;margin-bottom: 20px;border-radius: 5px 5px 0 0;}
nav div{float: left;width: 50%;text-align: center;padding: 10px 0;cursor: pointer;font-size: 20px;font-weight: 700;color: #fff;text-shadow: 0 1px 0 rgba(0,0,0,0.2);font-family: "microsoft yahei";}
nav div:first-child{border-right: 1px solid #fff;}
.bgcolor{background: rgba(255,255,255,0.8);color: #666;}
.register_main{display: none;}
